<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>TechGut</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>

  <!-- Google Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'>

  <!-- Revolution css -->
  <link rel="stylesheet" type="text/css" href="vendor/rs-plugin/css/settings.css" media="screen"/>
  <link rel="stylesheet" href="vendor/rs-plugin/css/extralayer.css">
  
  <!-- Flat icon css -->
  <link rel="stylesheet" href="vendor/flat-icon/flaticon.css">
  
  <!-- Font awesome -->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  
  <!-- Owl Carosel css -->
  <link rel="stylesheet" href="vendor/owl/css/owl.carousel.css">
  <link rel="stylesheet" href="vendor/owl/css/owl.theme.default.css">
  <link rel="stylesheet" href="vendor/owl/css/owl.theme.css">

  <!-- mmenu -->
  <link type="text/css" rel="stylesheet" href="vendor/mmenu/css/jquery.mmenu.css" />
  
  <!-- Bootstrap css -->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
  
  <!-- Animate css -->
  <link rel="stylesheet" href="css/animate.css">

  <!-- Custom Style css -->
  <link rel="stylesheet" href="css/hover.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive.css">

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')
</script>
<![endif]-->
</head>
<body>

  <div class="main ">


    <header  class="header-part">
      <div id="home">
        <!-- Fixed navbar -->
        <div class="navi navbar-default" role="navigation">
          <div class="container">
            <div class="navbar-header page-scroll">
              <a href="#menu">
                <button type="button" data-effect="st-effect-1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </a>
              <a class="wow zoomIn navbar-brand" href="index.html"><img src="img/logo.png" alt="TechGut"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse pull-right hidden-xs">
              <ul class="nav navbar-nav navbar-right">
                <li ><a class="page-scroll" href="index.html">Home</a></li>
                <li> <a class="page-scroll" href="index.html">about us</a></li>
                <li> <a class="page-scroll" href="index.html">services</a></li>
                <li> <a class="page-scroll" href="index.html">product</a></li>
                <li> <a class="page-scroll" href="index.html">team</a></li>
                <li class="dropdown"> <a class="page-scroll drop dropdown-toggle" ata-toggle="dropdown" role="button" aria-expanded="false" href="index.html">blog</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">full-width Blog</a></li>
                    <li><a href="blog-sidebar.html">sidebar blog</a></li>
                  </ul>
                </li>
                <li><a class="page-scroll" href="index.html">Contact</a></li>
                <!-- Search Block -->
                <li>
                  <i class="search fa fa-search search-btn"></i>
                  <div class="search-open" style="display:none;" >
                    <div class="input-group animated fadeInDown" >
                      <input type="text" class="form-control" placeholder="Search">
                      <span class="input-group-btn">
                        <button class="btn-u" type="button">Go</button>
                      </span>
                    </div>
                  </div>    
                </li>
                <!-- End Search Block -->
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div><!-- End of Nav -->
      </div>
    </header>


    <section class="blog-header section-padding"><!-- blog-header -->
      <div class="container"><!-- container -->
        <div class="row"><!-- row -->
          <div class="col-xs-12"><!-- col-xs-12 -->
            <h1 class="section-title text-center">all blog post</h1>
          </div><!-- /.col-xs-12 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.blog-header -->



    <section class="blog-content"><!-- blog-content -->
      <div class="container"><!-- container -->
        <div class="row"> <!-- row -->
          <div class="wow zoomIn col-xs-12"> <!-- col-xs-12 -->
            <img class="img-responsive" src="img/blog-image01.jpg" alt="blog-image01"/>  
          </div> <!-- /.col-xs-12-->
          <div class="wow zoomIn col-xs-2 col-sm-3 col-md-2"><!-- col-md-2 -->
            <div class="blog-date"><!-- blog-date -->
              <p> <span>15</span> janu 2015</p>
            </div><!-- /.blog-date -->
          </div><!-- /.col-md-2 -->
          <div class="wow zoomIn col-xs-12 col-sm-9 col-md-10"><!-- col-md-10 -->
            <h1><a href="#">This is a standard post format with Vimeo Video</a></h1>
            <div class="icon-holder"><!-- icon-holder -->
              <a href="#"><span><i class="flaticon-man494"></i> admin</span></a>
              <a href="#"><span><i class="flaticon-eye128"></i> views</span></a>
              <a href="#"><span><i class="flaticon-comments16"></i>comments</span></a>
            </div><!-- /.icon-holder -->
            <p class="contents">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ex quis arcu ultrices semper. Donec porttitor, justo sed convallis suscipit, magna est ullamcorper magna, nec efficitur enim felis vitae est. Fusce condimentum lobortis est, vitae dictum augue tempus ac. Pellentesque habitant morbi tristique senectus et netus Curae;
            </p>
            <a href="#"><button class="btn">read more</button></a>
          </div><!-- /.col-md-10 -->
        </div><!--/.row -->
      </div><!-- /.container -->
    </section><!-- /.blog-content -->


    <section class="blog-content"><!-- blog-content -->
      <div class="container"> <!-- container -->
        <div class="row"> <!-- row -->
          <div class="wow zoomIn col-xs-12"> <!-- col-xs-12 -->
            <iframe src="http://player.vimeo.com/video/80255970?color=569eba&title=0&portrait=0&badge=0" class="video-area" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
          </div><!-- /.col-xs-12 -->
          <div class="wow zoomIn col-xs-2 col-sm-3 col-md-2">  <!-- col-md-2 -->
            <div class="blog-date">
              <p> <span>15</span> janu 2015</p>
            </div>
          </div> <!-- /.col-md-2 -->
          <div class="wow zoomIn col-xs-12 col-sm-9 col-md-10">  <!-- col-xs-12 -->
            <h1><a href="#">This is a standard post format with Vimeo Video</a></h1>
            <div class="icon-holder"><!-- icon-holder -->
              <a href="#"><span><i class="flaticon-man494"></i> admin</span></a>
              <a href="#"><span><i class="flaticon-eye128"></i> views</span></a>
              <a href="#"><span><i class="flaticon-comments16"></i>comments</span></a>
            </div> <!-- /.icon-holder -->
            <p class="contents">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ex quis arcu ultrices semper. Donec porttitor, justo sed convallis suscipit, magna est ullamcorper magna, nec efficitur enim felis vitae est. Fusce condimentum lobortis est, vitae dictum augue tempus ac. Pellentesque habitant morbi tristique senectus et netus Curae;
            </p>
            <a href="#"><button class="btn">read more</button></a>
          </div><!-- /.col-xs-12 -->
        </div> <!-- /.row -->
        <div class="row"> <!-- row -->
          <div class="wow zoomIn col-xs-12"> <!-- col-xs-12 -->
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/138464532&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
          </div>
          <div class="wow zoomIn col-xs-2 col-sm-3 col-md-2 "> <!-- col-md-2 -->
            <div class="blog-date">
              <p> <span>15</span> janu 2015</p>
            </div>
          </div> <!-- /.col-md-2 -->
          <div class="wow zoomIn col-xs-12 col-sm-9 col-md-10"> <!-- col-xs-12 -->
            <h1><a href="#">This is a standard post format with Vimeo Video</a></h1>
            <div class="icon-holder"> <!-- icon-holder -->
              <a href="#"><span><i class="flaticon-man494"></i> admin</span></a>
              <a href="#"><span><i class="flaticon-eye128"></i> views</span></a>
              <a href="#"><span><i class="flaticon-comments16"></i>comments</span></a>
            </div> <!-- /.icon-holder -->
            <p class="contents">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ex quis arcu ultrices semper. Donec porttitor, justo sed convallis suscipit, magna est ullamcorper magna, nec efficitur enim felis vitae est. Fusce condimentum lobortis est, vitae dictum augue tempus ac. Pellentesque habitant morbi tristique senectus et netus Curae;
            </p>
            <a href="#"><button class="btn">read more</button></a>
          </div><!-- /.col-xs-12 -->
        </div> <!-- /.row -->

        <div class="row"> <!-- row -->
          <div class="wow zoomIn col-xs-12 col-sm-10 col-sm-offset-2 "> <!-- col-xs-12 -->
            <ul class="pagination  pagination-lg"> <!-- pagination -->
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&larr; </span><small>previous</small>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <small>next</small><span aria-hidden="true"> &rarr;</span>
                </a>
              </li>
            </ul>
          </div> <!-- /.col-xs-12 -->
        </div> <!-- /.row -->
      </div> <!-- /.container -->
    </section> <!-- /.blog-content -->

    <!-- END full width blog -->


    <!-- footer -->
    <footer >
      <div class="footer-wrapper section-padding">
        <div class="container">
          <div class="row">
            <div class="wow zoomIn col-xs-12 col-sm-6 col-md-3">
              <a href="index.html"><img src="img/footer-logo.png" alt="TechGut"></a>
              <p class="footer-content">Lorem ipsum dolor sit amet, consect tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven.</p>
            </div><!-- /.col-xs-12 .col-sm-3 .col-md-3 -->
            <div class="wow zoomIn col-xs-12 col-sm-3 col-md-3">
              <p class="footer-heading">link</p>
              <ul class="footermenu">
                <li><a href="index.html">about us</a></li>
                <li><a href="index.html">services</a></li>
                <li><a href="index.html">product</a></li>
                <li><a href="index.html">team</a></li>
                <li><a href="index.html">blog</a></li>
              </ul>
            </div><!-- /.col-xs-12 .col-sm-3 .col-md-3 -->
            <div class="wow zoomIn col-xs-12 col-sm-6 col-md-3">
              <p class="footer-heading">find us</p>
              <ul class="footercontact">
                <li><i class="flaticon-mainpage"></i><span>address:</span> One TECHGUT loop, 54100</li>
                <li><i class="flaticon-phone16"></i><span>phone:</span><a href="tel:88 02 8714612"> +88 02 8714612</a></li>
                <li><i class="flaticon-email21"></i><span>e-mail:</span><a href="mailto:support@themerole.com"> support@themerole.com</a></li>
                <li><i class="flaticon-world91"></i><span>web:</span><a href="http://themerole.com"> www.themerole.com</a></li>
              </ul>
              <i class="flaticon-home78"></i>
            </div><!-- /.col-xs-12 .col-sm-3 .col-md-3 -->
            <div class="wow zoomIn col-xs-12 col-sm-6 col-md-3">
              <p class="footer-heading">recent posts</p>
              <ul class="footerblog">
                <li><a href="#">The Green Fields of Spring</a> <p>13th Jun 2014</p></li>
                <li><a href="#">This is a Video Post</a> <p>18th Nov 2014</p></li>
                <li><a href="#">Satisfaction Lies in the Effort</a> <p>13th Jun 2014</p></li>
              </ul>
            </div><!-- /.col-xs-12 .col-sm-3 .col-md-3 -->
          </div> <!-- /.row -->
        </div> <!-- /.container -->
      </div>
      <div class="footer-bottom">
        <div class="container">
          <div class="row">
            <div class="wow zoomIn col-xs-12">
              <p>© 2015 All rights reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
              <div class="backtop  pull-right">
                <i class="fa fa-angle-up back-to-top"></i>
              </div>
            </div><!-- /.col-xs-12 -->
          </div><!-- /.row -->
        </div><!-- /.container -->
      </div><!-- /.creditwrapper -->
    </footer><!-- /Footer -->

    <!-- MMENU  -->
    <nav id="menu">
      <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="index.html">about us</a></li>
        <li><a href="index.html">services</a></li>
        <li><a href="index.html">product</a></li>
        <li><a href="index.html">team</a></li>
        <li><a href="index.html">blog</a>
          <ul>
            <li><a href="#">full width blog</a></li>
            <li><a href="blog-sidebar.html">sidebar blog</a></li>
          </ul>
        </li>
        <li><a href="index.html">contact</a></li>
      </ul>
    </nav><!-- /#menu -->

  </div><!-- /.main -->



  <!-- jQuery JS -->
  <script src="js/jquery-1.11.1.js"></script>

  <!-- Modernizr JS -->
  <script src="js/modernizr-2.6.2.min.js"></script>

  <!--Bootatrap JS-->
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

  <!-- REVOLUTION Slider  -->
  <script type="text/javascript" src="vendor/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
  <script type="text/javascript" src="vendor/rs-plugin/js/jquery.themepunch.revolution.js"></script>

  <!-- Shuffle JS -->
  <script src="js/jquery.shuffle.min.js"></script>

  <!-- mmenu -->
  <script type="text/javascript" src="vendor/mmenu/js/jquery.mmenu.min.js"></script>

  <!-- Owl Carosel -->
  <script src="vendor/owl/js/owl.carousel.min.js"></script>
  <script src="js/wow.min.js"></script>

  <!-- waypoints JS-->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  
  <!-- Counterup JS -->
  <script src="js/jquery.counterup.min.js"></script>
  
  <!-- Easing JS -->
  <script src="js/jquery.easing.min.js"></script>
  
  <!-- Smooth Scroll JS -->
  <script src="js/scrolling-nav.js"></script>
  <script src="js/smoothscroll.min.js"></script>

  <!-- Custom Script JS -->
  <script src="js/script.js"></script>

  <script>

  $(window).on('scroll', function(){
    if( $(window).scrollTop()>0 ){
      $('.navbar-default').addClass('navbar-fixed-top');
    } else {
      $('.navbar-default').removeClass('navbar-fixed-top');
    }
  });

  </script>

</body>
</html>
